<template>
  <section class="controls">
    <button @click="onOpenFile" title="打开 Markdown 文件">
      <i class="iconfont iconopen"></i> 打开
    </button>
    <button
      @click="onSaveMarkdown"
      title="保存 Markdown 文件"
      :disabled="!selectedNote"
    >
      <i class="iconfont iconsave"></i> 保存
    </button>
    <button
      @click="onRevert"
      title="还原到打开(新建)状态"
      :disabled="!revertEnable"
    >
      <i class="iconfont iconrevert"></i> 还原
    </button>
    <button @click="onSaveHtml" title="保存HTML" :disabled="!selectedNote">
      <i class="iconfont iconhtml"></i>
    </button>
    <button
      @click="showFile"
      title="在资源管理器中打开"
      :disabled="!selectedNote"
    >
      <i class="iconfont iconopenfolder"></i>
    </button>
    <button @click="onNewWindow" title="打开新窗口">
      <i class="iconfont iconnewwindow"></i>
    </button>
  </section>
</template>

<script lang="ts">
import { remote, ipcRenderer, shell } from 'electron'
import { Component, Prop, Vue, Emit } from 'vue-property-decorator'
import Note from '@/Note'

@Component
export default class Toolbar extends Vue {
  /** 当前选中的笔记 */
  @Prop() readonly selectedNote!: Note | null

  /** 是否使能“还原”按钮 */
  @Prop() readonly revertEnable!: boolean

  /**
   * 打开文件
   * @listens
   */
  onOpenFile() {
    ipcRenderer.send('open-file')
  }

  /**
   * 保存当前笔记到 markdown 文件
   * @listens
   */
  onSaveMarkdown() {
    if (this.selectedNote) {
      ipcRenderer.send('save-markdown', this.selectedNote)
    }
  }

  /**
   * 恢复文件到刚打开（创建）时的状态
   * @listens
   * @fires Toolbar#revert
   */
  @Emit('revert')
  onRevert() {}

  /**
   * 保存 HTML
   * @listens
   */
  onSaveHtml() {
    if (this.selectedNote) {
      ipcRenderer.send('save-html', this.selectedNote.preview)
    }
  }

  /**
   * 在资源管理器中显示文件
   * @listens
   */
  showFile() {
    const note = this.selectedNote
    if (note && note.filePath) {
      // 打开文件所在的文件夹
      shell.showItemInFolder(note.filePath)
    } else {
      return alert('此文件未保存为本地文件')
    }
  }

  /**
   * 新建一个窗口
   * @listens
   */
  onNewWindow() {
    ipcRenderer.send('create-window')
  }
}
</script>

<style lang="scss" scoped>
@import '@/style/base';

.controls {
  > * {
    margin: 2px;
  }
  button:disabled {
    background-color: $button-disabled;
  }
}
</style>
